import 'package:flutter/material.dart';
import "package:flutter/widgets.dart";
import "tabs/category.dart";
import "tabs/home.dart";
import "tabs/setting.dart";
import "tabs/history.dart";
import "tabs/message.dart";

class BottomBar extends StatefulWidget {
  const BottomBar({super.key});

  @override
  State<BottomBar> createState() => _BottomBarState();
}

class _BottomBarState extends State<BottomBar> {
  int _currentIndex = 0;
  final List<Widget> _pages = const [
    HomePage(),
    CategoryPage(),
    MessagePage(),
    SettingPage(),
    HistoryPage(),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('flutter App')),
      //  根据激活tabber切换组件
      body: _pages[_currentIndex],
      // TODO 加Container是为了修改按钮大小
      floatingActionButton: Container(
        height: 60,
        width: 60,
        margin: const EdgeInsets.only(top: 12),
        padding: const EdgeInsets.all(2),
        decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.circular(30),
        ),
        child: FloatingActionButton(
          // 内容颜色
          foregroundColor: Colors.white,
          // 按钮背景 三目判断颜色
          backgroundColor: _currentIndex == 2 ? Colors.red : Colors.blue,
          shape: const CircleBorder(),
          onPressed: () {
            setState(() {
              _currentIndex = 2;
            });
          },
          child: const Icon(Icons.add),
        ),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      //  底部导航，需要在Scaffold组件中使用
      bottomNavigationBar: BottomNavigationBar(
        // 当前选中index
        currentIndex: _currentIndex,
        // icon大小
        iconSize: 30,
        // 选中颜色
        fixedColor: Colors.red,
        // 点击底部按钮触发
        onTap: (val) {
          setState(() {
            _currentIndex = val;
          });
        },
        // 底部tab如若超过3个需要配置
        type: BottomNavigationBarType.fixed,
        items: const [
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: '首页',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.category),
            label: '分类',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.message),
            label: '消息',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.settings),
            label: '设置',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.history),
            label: '历史',
          ),
        ],
      ),
    );
  }
}
